<template>
  <div class="c-bg-sgray">
    <div class="c-bg-white c-ph24 c-pf c-maxw640 c-p-l0 c-p-r0 c-mlr-auto c-pz10">
      <div class="c-flex-row c-aligni-center c-justify-sb c-pv24">
        <div class="c-fc-xblack c-fs24 c-lh34 c-maxw456 c-text-ellipsis1">{{modName}}</div>
        <div class="c-flex-row c-aligni-center c-fc-sblack c-fs20 c-lh28">{{dataList && dataList.length > 0 ? total : 0}}件待提</div>
      </div>
    </div>
    <div class="c-ph24 c-pt80">
      <div v-for="(item, index) in dataList" :key="index" class="c-bg-white c-br8 c-mt20 c-pl76 c-pv32 c-pr16 c-p">
        <div class="c-hh30 c-ww30 c-brp50 c-pa c-p-t32 c-p-l26" :class="item.isChecked == true ? 'theme-bg' : 'c-bd1-mgray'" @click="selectGood(item.goId, index)">
          <span class="iconfont c-fs16 c-fc-white c-pa c-p-b0 c-p-r0 c-p-t0 c-p-l0 c-mauto c-flex-row c-aligni-center c-justify-center" v-show="item.isChecked == true">&#xe82c;</span>
        </div>
        <div class="c-flex-column c-alignc-center c-justify-sb">
          <div class="c-flex-row c-justify-sb c-aligni-center c-pb22 c-bd-b1-f6">
            <div class="c-fs20 c-lh28 c-fc-gray">{{item.createdAt}}</div>
            <div class="c-fs22 c-lh32 c-fc-xblack">提货码：{{item.deliverNo}}</div>
          </div>
          <div class="c-flex-row c-pt20 c-pb10" @click="clickPay(item)" v-for="(cItem,cIndex) in item.orderDetail" :key="cIndex">
            <div class="c-ww150 c-hh150 c-text-hidden c-br10">
              <img :src="$addXossFilter(cItem.avatar)" class="c-w100 c-br10 imgCloseBig" />
            </div>
            <div class="c-flex-column c-flex-grow1 c-w0 c-hh180 c-pl20">
              <div class="c-fs24"><span v-if="item.type == 2" class="c-fs20 theme-bg c-fc-white c-mr4 c-textAlign-c c-br4 c-pv4 c-ph8 c-br20">限时{{Number(cItem.price) == 0 ? '免费' : '折扣'}}</span>{{cItem.goodsName}}</div>
              <div class="c-fs20 c-fc-gray c-mt20" v-if="cItem.subSpecs">规格：{{cItem.subSpecs}}</div>
            </div>
            <div class="c-flex-column c-aligni-end">
              <span class="c-fs24 c-fc-xblack">{{'￥' | iosPriceFilter}}{{cItem.price}}</span>
              <span class="c-fs20 c-fc-gray c-mt5">x {{cItem.quantity}}</span>
            </div>
          </div>
          <div class="c-flex-column c-aligni-end">
            <div class="c-flex-row c-aligni-start">
              <div class="c-flex-column c-aligni-end c-ml14" v-if="item.deductedMoney * 1 != 0 || item.deductedCouponMoney * 1 != 0 || item.favourablePrice * 1 != 0">
                <div class="c-lh28 c-fc-gray c-fs20" v-if="item.deductedMoney * 1 != 0">{{customPointName}}抵扣：{{'￥' | iosPriceFilter}}<span class="c-fs28" v-html="item.deductedMoney">{{item.deductedMoney}},</span></div>
                <div class="c-lh28 c-fc-gray c-fs20" v-if="item.deductedCouponMoney * 1 != 0">优惠券抵扣：{{'￥' | iosPriceFilter}}<span class="c-fs28" v-html="item.deductedCouponMoney">{{item.deductedCouponMoney}},</span></div>
                <div class="c-lh28 c-fc-gray c-fs20" v-if="item.favourablePrice * 1 != 0">优惠金额：<span v-html="item.favourablePrice" class="c-fs28">{{item.favourablePrice}},</span></div>
              </div>
              <div class="c-lh28 c-fc-xblack c-fs20 c-ml14">实际付款：{{'￥' | iosPriceFilter}}<span class="c-fs28" v-html="item.payMoney">{{item.payMoney}}</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <loading-status-tem :dataStatus="dataStatus" :noDataText="'您当前没有待提商品哦~'" noneImage="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/mall/noneOfflineDer.png"></loading-status-tem>
    <div class="c-bg-white c-ph24 c-pf c-maxw640 c-p-l0 c-p-r0 c-mlr-auto c-p-b0 c-pz10" v-if="dataList&&dataList.length>0">
      <div class="c-flex-row c-aligni-center c-justify-sb c-pv24">
        <div class="c-flex-row c-alignc-center">
          <div class="c-hh30 c-ww30 c-brp50 c-p c-pl26 c-mr12" :class="isAllChecked == true || (goIds && (goIds.length == dataList.length)) ? 'theme-bg' : 'c-bd1-mgray'" @click="selectAll()">
            <span class="iconfont c-fs16 c-fc-white c-pa c-p-b0 c-p-r0 c-p-t0 c-p-l0 c-mauto c-flex-row c-aligni-center c-justify-center" v-show="isAllChecked == true || (goIds && (goIds.length == dataList.length))">&#xe82c;</span>
          </div>
          <div class="c-fs24 c-lh34 c-fc-xblack">{{isAllChecked == true || (goIds && (goIds.length == dataList.length)) ? '取消全选' : '全选'}}</div>
        </div>
        <div class="c-flex-row c-aligni-center c-fc-white c-flex-row c-alignc-center c-ph48 c-pv12 c-fs24 c-lh34 theme-bg c-br36" @click="pickUp">提货{{goIds.length > 0 ? '('+ goIds.length +')' : ''}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js";
let limit = 10;
export default {
  name: 'OfflineSiteGoods',
  components: {
    loadingStatusTem
  },
  data() {
    return {
      customPointName: localStorage.getItem("customPointName"),
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      modId: '',
      dataList: null,
      goIds: [],
      isAllChecked: false,
      dataStatus: 'HAS_MORE_DATA',
      total: 0,
      modName: '',
      page: 1,
      goods: []
    }
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    //点击进入订单详情
    clickPay(gItem) {
      let goPathg = gItem.collageId
        ? "/mall/mallOrder/orderDetail?goId=" + gItem.goId + "&collageId=" + gItem.collageId
        : "/mall/mallOrder/orderDetail?goId=" + gItem.goId;
      this.$routerGo(this, "push", {
        path: goPathg
      });
    },
    // 价格样式分割
    priceStyleChange(price) {
      if ((price * 1) == 0) {
        return price;
      }
      if (price == 'free') { //实际付款价格允许显示0.00
        price = '0.00'
      }
      let splitPrice = price.split('.')
      let afterPrice = `${splitPrice[0]}.<span class="c-fs20">${splitPrice[1]}</span>`;
      return afterPrice;
    },
    // v-html赋值
    setPriceHtml(item) {
      item.postage = (item.postage && item.postage * 1 > 0) ? this.priceStyleChange(item.postage) : this.priceStyleChange('0.00');
      item.favourablePrice = (item.favourablePrice && item.favourablePrice * 1 > 0) ? this.priceStyleChange(item.favourablePrice) : this.priceStyleChange('0.00');
      item.deductedCouponMoney = (item.deductedCouponMoney && item.deductedCouponMoney * 1 > 0) ? this.priceStyleChange(item.deductedCouponMoney) : this.priceStyleChange('0.00');
      item.deductedMoney = (item.deductedMoney && item.deductedMoney * 1 > 0) ? this.priceStyleChange(item.deductedMoney) : this.priceStyleChange('0.00');
      item.payMoney = (item.payMoney && item.payMoney * 1 > 0) ? this.priceStyleChange(item.payMoney) : this.priceStyleChange('free');
    },
    //自提点击
    pickUp() {
      let that = this;
      let url = `${global.apiurl}goodsOrders/confirmDeliver`;
      let data = {
        goIds: that.goIds
      }
      if (that.goIds.length > 0) {
        that.$cjConfirm({
          message: '请拿到商品后，再点击确认提货，确认后无法撤销', //弹窗内容
          messageCenter: true, //内容是否居中
          showMasker: true, //是否显示透明背景
          clickCloseModal: false, //是否点击透明背景关闭弹窗
          showCancelButton: true, //是否显示取消按钮
          cancelButtonText: '取消', //取消按钮文本
          confirmButtonText: '确认提货', //确认按钮文本
          onConfirm() {
            utilJs.postMethod(url, data, res => {
              if (res) {
                that.$routerGo(that, "push", {path: '/mall/offlineSite/pickUpSuccess'});
              }
            })
          }, //确认事件回调
          onCancel: null, //取消事件回调
        })
      } else {
        that.$cjConfirm({
          message: '请选择提货订单', //弹窗内容
          messageCenter: true, //内容是否居中
          showMasker: true, //是否显示透明背景
          clickCloseModal: false, //是否点击透明背景关闭弹窗
          showCancelButton: true, //是否显示取消按钮
          cancelButtonText: '取消', //取消按钮文本
          confirmButtonText: '确认', //确认按钮文本
          onCancel: null, //取消事件回调
        })
      }
    },
    //获取商品列表
    getList() {
      let that = this;
      if (that.dataStatus == 'LOADING') {
        return;
      }
      that.dataStatus = 'LOADING';
      let url = `${global.apiurl}goodsOrders/orderOfflineList`;
      let data = {
        modId: that.modId,
        limit: limit,
        page: that.page
      }
      utilJs.postMethod(url, data, res => {
        that.total = res.total ? res.total : 0;
        that.modName = res.modName ? res.modName : '';
        if (that.page == 1) {
          that.dataList = res.list ? res.list : [];
          for (let i = 0; i < that.dataList.length; i++) {
            that.$set(that.dataList[i], "isChecked", false)
          }
          that.dataList.forEach((item, index) => {
            that.setPriceHtml(item)
          })
        } else {
          let list = res.list;
          for (let i = 0; i < list.length; i++) {
            that.$set(list[i], "isChecked", false)
          }
          res.list.forEach((item, index) => {
            that.setPriceHtml(item)
          })
          that.dataList = [...that.dataList, ...list];
        }
        if (res.total * 1 == that.dataList.length) {
          that.dataStatus = res.total * 1 == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          that.dataStatus = 'HAS_MORE_DATA';
          that.page++;
        }
      }, failRes => {
        that.dataStatus = 'DATA_ERROR';
      });
    },
    //全选商品自提
    selectAll() {
      let list = this.dataList;
      this.goods = [];
      if (this.isAllChecked == false) {
        for (let key of list) {
          if (key.orderDetail.length == 1) {
            let itemT = {
              goId: key.goId,
              avatar: key.orderDetail[0].avatar,
              quantity: key.orderDetail[0].quantity || 1,
              postage: key.orderDetail[0].postage,
              subSpecs: key.orderDetail[0].subSpecs,
              price: key.orderDetail[0].price,
              type: key.orderDetail[0].type,
              goodsName: key.orderDetail[0].goodsName
            };
            itemT.goId = key.goId;
            this.goods.push(itemT);
          } else {
            let all = [];
            key.orderDetail.forEach(item => {
              let single = {
                avatar: item.avatar,
                quantity: item.quantity || 1,
                postage: item.postage,
                subSpecs: item.subSpecs,
                price: item.price,
                type: item.type,
                goodsName: item.goodsName
              };
              all.push(single);
            })
            this.goods.push({
              goId: key.goId,
              data: all
            });
          }
        }
        localStorage.setItem('offlineGoods', JSON.stringify(this.goods));
        this.isAllChecked = true;
        list.forEach((item, index) => {
          if (this.goIds.indexOf(item.goId) == -1) {
            this.goIds.push(item.goId);
          }
          this.$set(this.dataList[index], "isChecked", true);
        })
      } else {
        this.isAllChecked = false;
        this.goIds = [];
        list.forEach((item, index) => {
          this.$set(this.dataList[index], "isChecked", false);
        })
      }
    },
    //单选商品自提
    selectGood(goId, index) {
      let itemT = [];
      let current = this.dataList[index];
      if (current.isChecked == false) {
        if (current.orderDetail.length == 1) {
          itemT = {
            goId: current.orderDetail[0].goId,
            avatar: current.orderDetail[0].avatar,
            quantity: current.orderDetail[0].quantity || 1,
            postage: current.orderDetail[0].postage,
            subSpecs: current.orderDetail[0].subSpecs,
            price: current.orderDetail[0].price,
            type: current.orderDetail[0].type,
            goodsName: current.orderDetail[0].goodsName
          };
          itemT.goId = current.goId;
        } else {
          current.orderDetail.forEach(it => {
            let single = {
              goId: it.goId,
              avatar: it.avatar,
              quantity: it.quantity || 1,
              postage: it.postage,
              subSpecs: it.subSpecs,
              price: it.price,
              type: it.type,
              goodsName: it.goodsName
            };
            itemT.push(single);
          })
        }
        let goodList = this.goods.data ? this.goods.data : this.goods;
        let res = goodList.some(item => {
          if ((item.orderDetail && item.orderDetail.length == 1 && current.goId == item.goId) || (item.orderDetail && item.orderDetail.length > 1 && current.goId == item.orderDetail[0].goId)) {
            return true
          }
        })
        if (res == false) {
          current.orderDetail.length == 1 ? this.goods.push(itemT) : this.goods.push({goId: current.goId, data: itemT});
        }
        localStorage.setItem('offlineGoods', JSON.stringify(this.goods));
        if (this.goIds.indexOf(goId) == -1) {
          this.goIds.push(goId);
        }
        this.$set(this.dataList[index], "isChecked", true)
      } else {
        this.isAllChecked = false;
        let ind = this.goIds.indexOf(goId);
        if (ind > -1 && this.goIds.length > 0) {
          this.goIds.splice(ind, 1);
        }
        for (let i = 0; i < this.goods.length; i++) {
          if ((!this.goods[i].orderDetail && this.goods[i].goId == goId) || (this.goods[i].orderDetail && this.goods[i].orderDetail.length > 1 && this.goods[i].goId == goId)) {
            this.goods.splice(i, 1);
          }
        }
        localStorage.setItem('offlineGoods', JSON.stringify(this.goods));
        this.$set(this.dataList[index], "isChecked", false);
      }
    },
    //分享
    wechatShare: function () {
      let title = "首页";
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = window.location.href.split("#")[0] + '&refereeId=' + localStorage.getItem("userId");
      let shareDesc = "点击查看详情";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = "首页";
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = window.location.href.split("#")[0] + '&refereeId=' + localStorage.getItem("userId");
      let shareDesc = "点击查看详情";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    //下滑获取更多
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.dataList.length > 0) {
          this.getList();
        }
      });
    },
  },
  activated() {
    setDocumentTitle("待自提订单");
    this.modId = this.$route.query.modId ? this.$route.query.modId : '';
    this.dataList = [];
    this.goIds = [];
    this.goods = [];
    this.isAllChecked = false;
    this.page = 1;
    this.getList();
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>
<style>
.c-pl76 {
  padding-left: 1.9rem;
}
.c-p-l26 {
  left: 0.65rem;
}
.c-mauto{
  margin: auto;
}
</style>